<template>
  <div class="wrap">
    <div class="vtitle">VOC</div>
    <div class="inputarea">
      <div class="inputleft">商品链接</div>
      <el-input v-model="goodlink" placeholder="请输入商品链接地址" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>

    <div class="lists">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="url" label="URL" />
        <el-table-column prop="rating_total" label="评论总数" />
        <el-table-column label="星星⭐️数量" width="200">
          <template slot-scope="scope">
            <div class="ratewrap"><el-rate :value="5" disabled show-score text-color="#ff9900" score-template="{value}" /><span>{{ scope.row.rating_count[4] }}个</span></div>
            <div class="ratewrap"><el-rate :value="4" disabled show-score text-color="#ff9900" score-template="{value}" /><span>{{ scope.row.rating_count[3] }}个</span></div>
            <div class="ratewrap"><el-rate :value="3" disabled show-score text-color="#ff9900" score-template="{value}" /><span>{{ scope.row.rating_count[2] }}个</span></div>
            <div class="ratewrap"><el-rate :value="2" disabled show-score text-color="#ff9900" score-template="{value}" /><span>{{ scope.row.rating_count[1] }}个</span></div>
            <div class="ratewrap"><el-rate :value="1" disabled show-score text-color="#ff9900" score-template="{value}" /><span>{{ scope.row.rating_count[0] }}个</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="rcount_with_context" label="有内容" />
        <el-table-column prop="rcount_with_image" label="带图片" />
        <el-table-column prop="rcount_with_media" label="带视频" />
        <el-table-column prop="cnum" label="分析总数" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">未执行</el-tag>
            <el-tag v-else-if="scope.row.status == 1">已获得数据</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="success">分析完成</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="结果">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showresult(scope.row.data)">查看结果</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="分析结果" :visible.sync="dialogVisible" width="400" :before-close="handleClose">
      <h4>PR-Tag和NG-Tag分析</h4>
      <div class="resit">{{ result[0] }}</div>

      <h4>价格满意度定量分析</h4>
      <div class="resit">{{ result[1] }}</div>

      <h4>分析总结和建议</h4>
      <div class="resit">{{ result[2] }}</div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getlist } from '@/api/user'
import { to } from 'await-to-js'
export default {
  data() {
    return {
      goodlink: '',
      tableData: [{
        rating_count: [0, 0, 0, 0, 0]
      }],
      dialogVisible: false,
      result: ''
    }
  },
  async created() {
    const [err, data] = await to(getlist())
    console.log(err)
    this.tableData = data.list
  },
  methods: {
    showresult(data) {
      console.log(data)
      this.result = data
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
.inputarea {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1000px;
  margin: auto;
  margin-top: 20px;
}
.inputleft {
  margin-right: 20px;
  color: #888;
  flex-shrink: 0;
}
.input-with-select {
}
.vtitle {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: yellowgreen;
  margin-top: 20px;
}
.wrap {
  width: 1500px;
  margin: auto;
}
.lists {
  margin-top: 30px;
}
.ratewrap {
  display: flex;
  align-items: center;
}
.ratewrap span {
  margin-left: 10px;
  margin-top: -2px;
}
.resit {
  white-space: pre-line;
}
</style>
